<template>
	<view class="main">
		<ul class="list">
			<li v-for="(item, index) in list" :key="index">
				<view class="info">
					<view class="msg">
						<view class="tit">{{ item.realname }} {{ item.mobile }}</view>
						<view class="txt">
							{{ item.province }} {{ item.city }}
							{{ item.district }} {{ item.address }} 
						</view>
					</view>
					<view class="img" @tap="routerTo(`/pageB/newAdd?id=${item.id}`)">
						<image src="@/static/img/log1.png" mode=""></image>
					</view>
				</view>
				<view class="fn">
					<view class="moren">
						<image v-if="item.status == 1" src="@/static/img/Group.png" mode=""></image>
						<image v-else src="@/static/img/noGroup.png" mode=""></image>
						默认地址
					</view>
					<view class="del" @tap="del(item.id)">删除</view>
				</view>
			</li>
		</ul>
		<view class="bottom" @tap="routerTo('/pageB/newAdd')">
			<view class="btn">添加地址</view>
		</view>
	</view>
</template>

<script>
	import {
		Transport,
		address,
		deleteAdd
	} from '@/api/index.js';
	export default {
		data() {
			return {
				list: [],
				type: ''
			};
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			seleAdd(item) {
				if (this.type) {
					this.selemoren(item)
					uni.navigateBack()
				}
			},
			async del(id) {
				let res = await deleteAdd({
					id: id
				});
				if (res.code == 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					this.getList();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			async selemoren(item) {
				if (item.status != 1) {
					let res = await address({
						mobile: item.mobile,
						area: item.area,
						address: item.address,
						realname: item.realname,
						status: 1,
						id: item.id
					});
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						this.getList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}
			},
			async getList() {
				let res = await Transport();
				this.list = res.data;
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 88rpx);
		padding: 30rpx;
		padding-bottom: 160rpx;

		.list {
			li {
				padding: 30rpx 24rpx 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 24rpx;
					border-bottom: 2rpx solid #ddd;
					margin-bottom: 20rpx;

					.avatar {
						image {
							width: 84rpx;
							height: 84rpx;
							border-radius: 2000rpx;
						}
					}

					.msg {
						margin: 0 40rpx 0 20rpx;

						.tit {
							font-size: 32rpx;
							color: #000;
							margin-bottom: 10rpx;
						}

						.txt {
							font-size: 28rpx;
							color: #000;
						}
					}

					.img {
						image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}

				.fn {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.moren {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #000;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 14rpx;
						}
					}

					.del {
						font-size: 28rpx;
						color: #000;
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			padding: 20rpx 30rpx;

			.btn {
				width: 100%;
				padding: 24rpx 0;
				text-align: center;
				color: #fff;
				background-color: #EA504F;
				border-radius: 200rpx;
			}
		}
	}
</style>